<template>

  <div class="app">
    <main>
      <div class="header">
        <h2>{{num1}}</h2>
        <h1 class="option_key">{{option_key}}</h1>
        <h2>{{num2}}</h2>
        <hr/>
        <h2 title="结果">{{num3}}</h2>
      </div>
      <div class="content">
        <div class="keyboard">
                    <span v-for="item in key" :key="item" class="key" @click="setNum(item)">
                        {{item}}
                    </span>
        </div>
        <div class="option">
                    <span v-for="item in options" :key="item" class="key" @click="setOption(item)">
                        {{item}}
                    </span>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key:['1','2','3','4','5','6','7','8','9',".",'0'," "],
      options:["+","-","*","/","C"],
      num1:"",
      num2:"",
      num3:"",
      option_key:"",
      setThatNum:"num1",
    }
  },
  methods:{
    setNum(item){
      if(this.setThatNum=="num1"){
        this.num1+=item;
      }else{
        this.num2+=item;
      }
    },
    setOption(val){
      if(val=="C"){
        this.setThatNum="num1";
        this.num1="";
        this.num2="";
        this.num3="";
        this.option_key="";
      }else if(this.num1!=""){
        this.setThatNum="num2";
        this.option_key=val;
      }
    }
  },
  watch:{
    num2(newValue){
      switch(this.option_key){
        case "+":{
          this.num3=Number(this.num1)+Number(newValue);
          break;
        }
        case "-":{
          this.num3=Number(this.num1)-Number(newValue);
          break;
        }
        case "*":{
          this.num3=Number(this.num1)*Number(newValue);
          break;
        }
        case "/":{
          this.num3=Number(this.num1)/Number(newValue);
          break;
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
main{
  width: 100%;
  height: 80vh;
  margin: 100px auto 0px auto;
  border: 1px solid #dfdfdf;
  box-sizing: border-box;
}
.header{
  height: 35%;
  background-color: #dfdfdf;
  h2{
    text-align: right;
  }
}
.content{
  height: 65%;
  display: flex;
  .keyboard{
    padding-top: 30px;
    width: 60%;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-around;
    box-sizing: border-box;
    border: 1px solid black;
    .key{
      width: 30%;
      height: 50px;
      display: inline-block;
      border: 1px solid black;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
  }
  .option{
    width: 40%;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-around;
    box-sizing: border-box;
    padding-top: 5px;
    .key{
      width: 50%;
      height: 50px;
      display: inline-block;
      border: 1px solid black;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
  }
}

</style>